// series: [
//   {},
//   {
//     name: "折线图",
//     type: "line",
//     areaStyle: {
//       opacity: 0.2
//     },
//     data: [
//       {
//         value: ["2020-11-01", 10],
//         symbol: "circle"
//       },
//       {
//         value: ["2020-11-03", 20],
//         symbol: "rect"
//       },
//       {
//         value: ["2020-11-05", 15],
//         symbol: "roundRect"
//       },
//       {
//         value: ["2020-11-07", 21],
//         symbol: "triangle"
//       },
//       {
//         value: ["2020-11-09", 18],
//         symbol: "diamond"
//       },
//       {
//         value: ["2020-11-11", 24],
//         symbol: "pin"
//       },
//       {
//         value: ["2020-11-13", 26],
//         symbol: "arrow"
//       },
//       {
//         value: ["2020-11-15", 15],
//         symbol: "none"
//       }
//     ]
//   }
// ]

// class tooltip {
//   constructor() {
//     // let { name, age } = parames;
//     this.trigger = "item";
//     this.position = "right";
//     this.formatter = e => {
//       console.log(e);
//     };
//   }
// }

// import themeOption from "./themeOption.json";

const themeOption = {
  // color: ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"],
  color: [
    "#1890FF",
    "#F9CD33",
    "#F86846",
    "#78C446",
    "#8F55E7",
    "#605AD8",
    "#5ED8A9",
    "#FF99CC",
    "#FF9B1A",
    "#FF782F",
    "#99CCFF",
    "#6699FF",
    "#2F42F2",
    "#003399",
    "#000066",
    "#84F5FF",
    "#35DAF3",
    "#00C8E6",
    "#10AEC1",
    "#009999",
    "#FFFF66",
    "#FFFF00",
    "#99CC33",
    "#339933",
    "#009966",
    "#FFCC99",
    "#FF9999",
    "#FF6666",
    "#CC0033",
    "#CC3399"
  ],
  backgroundColor: "rgba(0,0,0,0)",
  textStyle: {},
  title: {
    textStyle: {
      color: "#516b91"
    },
    subtextStyle: {
      color: "#93b7e3"
    }
  },
  line: {
    itemStyle: {
      borderWidth: "2"
    },
    lineStyle: {
      width: "2"
    },
    symbolSize: "6",
    symbol: "emptyCircle",
    smooth: true
  },
  radar: {
    itemStyle: {
      borderWidth: "2"
    },
    lineStyle: {
      width: "2"
    },
    symbolSize: "6",
    symbol: "emptyCircle",
    smooth: true
  },
  bar: {
    itemStyle: {
      barBorderWidth: 0,
      barBorderColor: "#ccc"
    }
  },
  pie: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    }
  },
  scatter: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    }
  },
  boxplot: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    }
  },
  parallel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    }
  },
  sankey: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    }
  },
  funnel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    }
  },
  gauge: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    }
  },
  candlestick: {
    itemStyle: {
      color: "#edafda",
      color0: "transparent",
      borderColor: "#d680bc",
      borderColor0: "#8fd3e8",
      borderWidth: "2"
    }
  },
  graph: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#ccc"
    },
    lineStyle: {
      width: 1,
      color: "#aaaaaa"
    },
    symbolSize: "6",
    symbol: "emptyCircle",
    smooth: true,
    color: ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"],
    label: {
      color: "#eeeeee"
    }
  },
  map: {
    itemStyle: {
      normal: {
        areaColor: "#f3f3f3",
        borderColor: "#516b91",
        borderWidth: 0.5
      },
      emphasis: {
        areaColor: "#a5e7f0",
        borderColor: "#516b91",
        borderWidth: 1
      }
    },
    label: {
      normal: {
        textStyle: {
          color: "#000"
        }
      },
      emphasis: {
        textStyle: {
          color: "#516b91"
        }
      }
    }
  },
  geo: {
    itemStyle: {
      normal: {
        areaColor: "#f3f3f3",
        borderColor: "#516b91",
        borderWidth: 0.5
      },
      emphasis: {
        areaColor: "#a5e7f0",
        borderColor: "#516b91",
        borderWidth: 1
      }
    },
    label: {
      normal: {
        textStyle: {
          color: "#000"
        }
      },
      emphasis: {
        textStyle: {
          color: "#516b91"
        }
      }
    }
  },
  categoryAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#999999"
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eeeeee"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  valueAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#999999"
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eeeeee"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  logAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#999999"
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eeeeee"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  timeAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#cccccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#333"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#999999"
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eeeeee"]
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
      }
    }
  },
  toolbox: {
    iconStyle: {
      normal: {
        borderColor: "#999999"
      },
      emphasis: {
        borderColor: "#666666"
      }
    }
  },
  legend: {
    textStyle: {
      color: "#999999"
    }
  },
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: "#cccccc",
        width: 1
      },
      crossStyle: {
        color: "#cccccc",
        width: 1
      }
    }
  }
  // visualMap: {
  //   color: ["#516b91", "#59c4e6", "#a5e7f0"]
  // },
  // dataZoom: {
  //   backgroundColor: "rgba(0,0,0,0)",
  //   dataBackgroundColor: "rgba(255,255,255,0.3)",
  //   fillerColor: "rgba(167,183,204,0.4)",
  //   handleColor: "#a7b7cc",
  //   handleSize: "100%",
  //   textStyle: {
  //     color: "#333333"
  //   }
  // },
  // markPoint: {
  //   label: {
  //     color: "#eeeeee"
  //   },
  //   emphasis: {
  //     label: {
  //       color: "#eeeeee"
  //     }
  //   }
  // }
};

const buildTitle = parames => {
  let { text } = parames;
  return {
    text
  };
};

const buildTooltip = () => {
  // let { data } = parames;
  return {
    trigger: "item",
    position: "right",
    formatter: "{b} {d}%"
  };
};

const buildGrid = parames => {
  // let { legendName, data } = parames;
  // return [{ left: "20%", top: "15%", width: "65%" }];
  // return [{ left: "20%", top: "15%", width: "65%" }];
  return parames ? parames : {};
};

const buildLegend = parames => {
  // let { legendName, data } = parames;
  return {
    legend: {
      orient: "horizontal",
      top: "24",
      left: "0"
    }
  };
};

const buildXAxis = parames => {
  return {
    type: parames ? parames.type : "category",
    data: parames ? parames.data : [],
    boundaryGap: parames ? parames.boundaryGap : false
  };
};

const buildYAxis = parames => {
  return {
    type: parames ? parames.type : "value"
  };
};

const buildPieSeries = lists => {
  return lists.map((item, index) => {
    let { option, data } = item;
    return {
      type: "pie",
      ...option,
      data: data
    };
  });
};

const buildLineSeries = lists => {
  return lists.map((item, index) => {
    let { option, data } = item;
    return {
      type: "line",
      areaStyle: {
        opacity: 0.2
      },
      ...option,
      data: data
    };
  });
};

const buildBarSeries = lists => {
  return lists.map((item, index) => {
    let { option, data } = item;
    return {
      type: "bar",
      barWidth: "16",
      ...option,
      data: data
    };
  });
};

function buildSeries() {
  // 对参数进行解耦
  const args = Array.from(arguments);
  // let args = [...arguments];

  return [].concat(...args);
}

function getDefaultOption() {
  return Object.assign({}, themeOption);
}

const buildOption = parames => {
  let defaultOption = getDefaultOption();
  // let defaultOption = {};

  if (parames) {
    for (let paramesKey in parames) {
      if (parames.hasOwnProperty(paramesKey)) {
        if (defaultOption.hasOwnProperty(paramesKey)) {
          defaultOption[paramesKey] = Object.assign(
            defaultOption[paramesKey],
            parames[paramesKey]
          );
        } else {
          // defaultOption = Object.assign(defaultOption, parames[paramesKey]);
          defaultOption[paramesKey] = parames[paramesKey];
        }
      }
    }
  }

  // let option = Object.assign(defaultOption, parames);

  return defaultOption;
};

export {
  themeOption,
  buildOption,
  buildTitle,
  buildGrid,
  buildXAxis,
  buildYAxis,
  buildPieSeries,
  buildLineSeries,
  buildBarSeries,
  buildTooltip,
  buildLegend,
  buildSeries
};

// export default {
//   legend: {
//     orient: "horizontal",
//     top: "24",
//     left: "0"
//   },
//   grid: [{ left: "20%", top: "15%", width: "65%" }],
//   tooltip: {
//     trigger: "item",
//     position: "right",
//     formatter: "{b} {d}%"
//   },
//   xAxis: {
//     boundaryGap: false
//   },
//   yAxis: {},
//   series: [
//     {
//       name: "饼图",
//       type: "pie",
//       radius: "70%",
//       center: ["8%", "50%"],
//       label: {
//         normal: {
//           position: "inner", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
//           formatter: function(e) {
//             return Math.ceil(parseFloat(e.percent)) + "%";
//           }
//         }
//       }
//     }
//   ]
// };
